<template>
    <div>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :wrapperCol="wrapperCol" :labelCol="labelCol">
            <a-form-model-item label="载体/园区类型" prop="type">
                <a-select v-model="form.type" placeholder="请选择载体/园区类型">
                    <a-select-option v-for="item in enterCategory" :key="item.dictValue" :value="item.dictValue">{{
                        item.dictLabel }}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="载体名称" prop="name">
                <a-input v-model="form.name" placeholder="请输入载体名称" />
            </a-form-model-item>

            <a-form-model-item label="入驻时间" prop="entryDate">
                <a-date-picker v-model="form.entryDate" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD"
                    placeholder="请选择入驻时间" style="width: 100%;" />
            </a-form-model-item>

            <a-form-model-item label="载体认证时间" prop="authDate">
                <a-date-picker v-model="form.authDate" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD"
                    placeholder="请选择载体认证时间" style="width: 100%;" />
            </a-form-model-item>

            <a-form-model-item label="备注" prop="remark">
                <a-textarea :rows="4" type="textarea" :maxLength="200" v-model="form.remark" placeholder="请输入备注" />
            </a-form-model-item>

        </a-form-model>
        <div class="footer">
            <a-button type="primary" @click="submitForm">确 定</a-button>
            <a-button @click="cancel">取 消</a-button>
        </div>
    </div>
</template>
<script>
import { getDicts } from '@/apis/system';
export default {
    props: {
        showModal: {
            default: false,
            type: Boolean
        },
        enterCategory: {
            default: () => {
                return []
            },
            type: Array,
        }
    },
    // 
    data () {
        return {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
            form: {
                id: '',
                type: undefined,
                name: '',
                entryDate: '',
                authDate: '',
                remark: '',
            },
            rules: {
                type: [
                    { required: true, message: '请选择载体/园区类型!', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入载体名称!', trigger: 'blur' },
                ],
                entryDate: [
                    { required: true, message: '请选择入驻时间!', trigger: 'change' },
                ],
                authDate: [
                    { required: true, message: '请选择载体认证时间!', trigger: 'change' },
                ]
            },
        }
    },

    created () {
    },

    watch: {
        showModal: {
            handler (val) {
                this.resetForm()

            },
            deep: true
        }
    },

    methods: {

        submitForm () {
            console.log(this.form);
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // 返回父组件form值
                    this.form.id = new Date().getTime()
                    this.$emit('submit', this.form)
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });


        },
        cancel () {
            this.$emit('cancel')
        },
        resetForm () {
            this.$refs.ruleForm.resetFields()
            this.form = {
                id: '',
                type: undefined,
                name: '',
                entryDate: '',
                authDate: '',
                remark: '',
            }
        }
    }
}
</script>

<style lang="less" scoped>
.footer {
    display: flex;
    justify-content: center;

    button {
        margin: 0 10px;
    }

}
</style>